export const addBrandCard = (editor) => {

    const {Components} = editor;

    Components.addType('addBrandCard', {
      model: {
        defaults: {
          name: 'addBrandCard',
          droppable: false,
          attributes: {
              class:'brand',
              'data-gjs-type':'addBrandCard'
          },
          components: [{
            type: 'div',
            attributes: {
                class: 'brand-img'
            },
            components: [{
                type: 'image',
                attributes: {
                    src: 'https://cdn4.codesign.qq.com/prototypes/2023/08/10/xDP3923q32qn08ZwlKp10/vlppcsjsxuhbexfp/4dac88d3b0b8ecf20a9818904b852796.svg'
                },
              }],
          },
          {
            type: 'div',
            attributes: {
                class: 'center-icon'
            },
            components: [{
                type: 'image',
                attributes: {
                    src: 'https://cdn4.codesign.qq.com/prototypes/2023/08/10/xDP3923q32qn08ZwlKp10/vlppcsjsxuhbexfp/4dac88d3b0b8ecf20a9818904b852796.svg'
                },
              }],
          },
          {
            type: 'div',
            attributes: {
                class: 'brand-content'
            },
            components: [{
                tagName: 'p',
                type:'text',
                attributes: {
                    class:'brand-content-title'
                },
                content:'品牌定位'
              },
              {
                tagName: 'p',
                type:'text',
                content:'一站式BIM服务商'
              }],
          }],
        styles:`
          .brand {
            position: absolute;
            width: 249px;
            height: 270px;
            background-color: antiquewhite;
            align-items: center;
            display: flex;
            justify-content: center;
        }
        .brand:hover{box-shadow:rgba(0, 0, 0, 0.2) 0px 4px 8px;}
        .brand-img{
            position: absolute;
            width: 249px;
            height: 270px;
        }
        .brand-img>img{
            position: absolute;
            width: 100%;
            height: 70%;
        }
        .center-icon>img{
            width: 80%;
            height: 80%;
            clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
        }
        .brand-content{
            text-align: center;
            position: absolute;
            font-size: 12px;
            margin-top: 60%;
            clip-path: polygon(43% 24%, 57% 24%, 64% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 36% 0%);
            background-color: white;
            width: 249.5px;
            height: 45%;
        }
        .brand-content-title{
            margin-top: 50px;
            color: rgb(54, 151, 255);
            font-weight:bold;
            font-size: 17px;
        }
        .center-icon{
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(54, 151, 255);
            width: 55px;
            height: 48px;
            margin-bottom: -30px;
            clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
        }
        `,
          script() {
            var thx = document.getElementById(this.attributes.id.value);
          }
        },
      },
    })

    // 注册组件
    editor.BlockManager.add('add-brandCard', {
        label: '品牌卡片',
        category: '产品中心组件',
        media:`<svg t="1721012684965" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6962" width="30" height="30"><path d="M719.471424 1024h-497.330477C126.940151 999.219818 54.412789 949.745797 28.959139 848.311101l0.379906-47.988937c26.455218-99.707853 94.043812-155.053137 193.406296-171.112768 37.317054-6.043947 76.447293-0.9843 116.458221-0.984299l-127.751767-299.814297c-24.555692-57.624715-11.828867-103.610516 39.458338-139.874197s110.984131-51.45989 171.889847-59.817805c67.830351-9.324946 125.662288-38.197744 178.831751-79.590145 21.999966-17.113004 45.813117-31.894771 68.883725-47.626301l19.755071-1.450547c42.048601 20.722103 53.825663 40.632591 46.175754 91.919797-25.160087 168.539773-143.845933 385.241168-362.049681 419.708932l31.860234 74.081519c5.180526-3.453684 7.805326-4.783352 9.860267-6.700146 115.69841-107.236884 249.85676-126.301219 393.426399-73.131756 101.106595 37.420665 172.684194 108.791042 184.012277 221.45021 11.638915 115.007673-46.365706 196.65276-143.535102 249.822223-40.045465 21.948161-86.825613 31.566671-130.549251 46.797416z m-251.618138-81.161571v4.127152c65.291894 0 130.601056 0.673468 195.875681-0.172684 73.252635-0.967031 140.530397-19.893219 195.77207-70.800519 66.759709-61.61372 76.792661-151.96209 24.918329-221.363868-96.841296-129.513145-330.672962-130.808277-429.482858-2.883826-11.120862 14.384593-11.880673 26.351608-4.645205 42.393969 18.373598 40.788007 35.469333 82.163139 52.495995 123.538272 9.532167 23.191487 0.345368 40.563517-21.067471 50.078417s-38.992091 0.518053-48.662406-19.202483c-13.65932-27.905766-24.642034-57.106663-37.299786-85.478676-3.453684-7.805326-7.270005-16.38773-13.33122-21.999966-65.499115-60.439468-199.847417-48.144353-253.517664 22.794314-27.629471 36.574512-28.527429 82.111334-0.9843 119.307509 25.660871 34.657718 61.354694 56.985784 103.506905 58.712626 78.674919 3.263731 157.608864 0.949763 236.42193 0.949763zM649.327105 112.555557c-69.954367 52.426921-146.660686 83.337392-232.571072 96.202365-40.390833 6.061215-79.521071 23.778613-117.684278 39.87278-21.602793 9.117725-31.204034 26.921466-16.923051 52.340579 12.295115 21.896356 20.359466 46.158485 30.271539 69.384509 30.910471 72.337409 41.271522 76.464561 114.938599 45.77858 2.693873-1.122447 5.422284-2.193089 8.029815-3.453684 123.969983-62.218115 181.456551-172.062531 213.938448-300.125129z" p-id="6963"></path></svg>`,
        content: {
          type:'addBrandCard',
        },
    });
};